<template>
	<view class="wallet">
		<view class="fixed-box" v-show="headOpacity==0" >
			<view class="sys-head" view :style="{ height: statusBarHeight+'px' }"></view>
			<view class="header-title">
				<view class="head-wrapper" :style="'top:'+statusBarHeight+'px'">
					<view class="head-menu">
						<view class='iconfont icon-xiangzuo' @click="returns"></view>
					</view>
				</view>
				钱包
			</view>
		</view>
		<view class="fixed-box" :style="'opacity:'+headOpacity" style="background-color: #fff;">
			<view class="sys-head" view :style="{ height: statusBarHeight+'px' }"></view>
			<view class="header-title">
				<view class="head-wrapper" :style="'top:'+statusBarHeight+'px'">
					<view class="head-menu">
						<view class='iconfont icon-xiangzuo' @click="returns"></view>
					</view>
				</view>
				钱包
			</view>
		</view>
		<view class="bgBox"></view>
		<view class="content-box" :style="'top:'+(43+statusBarHeight)+'px'" >
			<view class="card-box">
				<view class="title">账户积分</view>
				<view class="number">{{money}}</view>
				<view class="flex-align-center withdraw">
					<view class="flex-aj-center" @click="goPage('./withdrawRecord')"  >提现记录</view>
					<view class="flex-aj-center" @click="goPage('./apply')" >申请提现</view>
				</view>
				<view class="flex-aj-center protect">
					<image src="https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/86251714101564348.png" mode=""></image>保障中
				</view>
			</view>
			<view class="gradeShop">
				<view class="title">积分商城</view>
				<view class="list flex-align-center">
					<view class="item" v-for="(item,index) in 1" :key="index" >
						<image src="https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/56791714102556690.png" class="goodsImg" mode=""></image>
						<view class="goodsName line2">京东E卡/电子礼品卡 1000元面额</view>
						<view class="flex-align-center price">
							100,000<image src="https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/57601714102539268.png" mode=""></image>
						</view>
						<view class="flex-aj-center now">暂未开放</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getUserInfo } from "@/api/user.js"
	export default {
		data(){
			return{
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				headOpacity: 0,
				money:''
			}
		},
		onPageScroll(e) {
			let scrollY = e.scrollTop;
			let height = this.statusBarHeight + 43
			var opacity = (scrollY / height);
			this.headOpacity = opacity > 1 ? 1 : opacity;
		},
		onShow() {
			this.getUserInfo()
		},
		methods:{
			getUserInfo(){
				getUserInfo().then(res=>{
					this.money = res.data.hhrInfo.currentPoint
				})
			},
			returns(){
				uni.navigateBack()
			},
			goPage(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped >
	.content-box{
		position: relative;
		padding: 24rpx;
		.card-box{
			width: 100%;
			height: 356rpx;
			background-image: url(https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/39451714102684596.png);
			background-size: cover;
			padding: 48rpx;
			position: relative;
			margin-bottom: 48rpx;
			.protect{
				position: absolute;
				right: 0;
				top: 84rpx;
				width: 136rpx;
				height: 48rpx;
				background: rgba(255,255,255,0.24);
				border-radius: 200rpx 0rpx 0rpx 200rpx;
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 24rpx;
				text-align: left;
				font-style: normal;
				image{
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
			.title{
				width: 478rpx;
				height: 28rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: rgba(255,255,255,0.72);
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				margin-bottom: 24rpx;
			}
			.number{
				width: 478rpx;
				height: 64rpx;
				font-family: D-DINExp;
				font-weight: bold;
				font-size: 64rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: left;
				font-style: normal;
				margin-bottom: 48rpx;
			}
			.withdraw{
				view{
					width: 292rpx;
					height: 96rpx;
					background: rgba(255,255,255,0.12);
					border-radius: 48rpx;
					border: 1rpx solid rgba(255,255,255,0.24);
					font-family: PingFangSC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 32rpx;
					font-style: normal;
				}
				:last-child{
					background: #FFFFFF;
					color: #FF2945;
					margin-left: 22rpx;
				}
			}
		}
		.gradeShop{
			.title{
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 32rpx;
				color: #292929;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
			}
			.list{
				flex-wrap: wrap;
				.item{
					background: #FFFFFF;
					border-radius: 16rpx;
					width: 340rpx;
					padding-bottom: 24rpx;
					margin-right: 22rpx;
					margin-top: 24rpx;
					&:nth-child(2n){
						margin-right: 0;
					}
					.goodsImg{
						width: 100%;
						height: 256rpx;
						margin-bottom: 16rpx;
					}
					.goodsName{
						width: 292rpx;
						max-height: 88rpx;
						font-family: PingFangSC;
						font-weight: 500;
						font-size: 28rpx;
						color: #292929;
						line-height: 44rpx;
						text-align: justify;
						font-style: normal;
						margin: 0 24rpx 16rpx;
					}
					.price{
						margin: 0 24rpx 24rpx;
						font-family: D-DINExp;
						font-weight: bold;
						font-size: 40rpx;
						color: #FF2945;
						line-height: 40rpx;
						text-align: justify;
						font-style: normal;
						image{
							width: 24rpx;
							height: 24rpx;
							margin-left: 8rpx;
						}
					}
					.now{
						width: 292rpx;
						height: 80rpx;
						background: linear-gradient( 90deg, #FF961F 0%, #FF781F 100%);
						border-radius: 8rpx;
						font-family: PingFangSC;
						font-weight: 600;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 32rpx;
						margin: 0 24rpx;
						font-style: normal;
					}
				}
			}
		}
	}
	
	.bgBox{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 520rpx;
		background-image: url(https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/23641714101431974.png);
		background-size: cover;
	}
	
	.fixed-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
	
		.header-title {
			height: 43px;
			display: flex;
			align-items: center;
			justify-content: center;
	
			.head-wrapper {
				z-index: 999;
				display: flex;
				align-items: center;
				position: fixed;
				left: 30rpx;
				top: 0;
				/* #ifdef MP */
				height: 43px;
				/* #endif */
				/* #ifdef H5 */
				height: 114rpx;
	
				/* #endif */
				.head-menu {
					display: flex;
					align-items: center;
					height: 54rpx;
					border-radius: 27rpx;
	
					.iconfont {
						flex: 1;
						text-align: left;
						color: #333;
						box-sizing: border-box;
					}
				}
			}
	
		}
	}
</style>